<template>
  <div class="maintain">
    <el-table :data="adminList" style="width: 100%">
      <el-table-column prop="username" label="用户名" >
      </el-table-column>
      <el-table-column prop="password" label="密码" >
      </el-table-column>
      <el-table-column label="权限"> 
        <template slot-scope="scope">
          <el-tag :type="scope.row.permission==1?'success':''"> {{ scope.row.permission==1? '超级管理员':'管理员' }}</el-tag>
     
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-button
            type="primary"
            @click="addAdmin"
            icon="el-icon-plus"
          ></el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="editAdmin(scope.row)"
            circle
          ></el-button>
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="confirm(scope.row)"
            @cancel="$message.info('已取消')"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="'管理员' + (addDialogVisible ? '添加' : '编辑')"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="admin" :model="admin" label-width="80px" :rules="rules">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="admin.username"
              :disabled="!addDialogVisible"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="admin.password"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCommit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adminList: [],
      dialogVisible: false,
      addDialogVisible: false,
      admin: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getAdminList();
  },
  methods: {
    async getAdminList() {
      const res = await this.$http.get("/management/getAdministratorList");
      console.log(res);
      this.adminList = res.data.data;
    },

    editAdmin(item) {
      console.log(item);
      this.admin = { ...item };
      this.dialogVisible = true;
    },
    addAdmin() {
      this.addDialogVisible = true;
      this.dialogVisible = true;
    },
    async editCommit() {
      this.$refs["admin"].validate(async (valid) => {
        if (valid) {
          const res = await this.$http({
            url: this.addDialogVisible
              ? "/management/insertAdministrator"
              : "/management/updatePassword",
            method: this.addDialogVisible ? "POST" : "PUT",
            params: {
              username: this.admin.username,
              password: this.admin.password,
            },
          });
          console.log(res);
          if (res.data.message != "ok") {
            return this.$message.error(res.data.data);
          }
          this.$message.success(
            this.addDialogVisible ? "添加" : "修改" + "成功"
          );
          this.handleCloses();
          this.getAdminList();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$refs["admin"].resetFields();
          this.addDialogVisible = false;
        })
        .catch((_) => {});
    },
    handleCloses() {
      this.dialogVisible = false;
      this.$refs["admin"].resetFields();
      this.addDialogVisible = false;
    },
    async confirm(item) {
      const res = await this.$http.delete(
        `/management/delAdministrator?username=${item.username}`
      );
      console.log(res);
      if (res.data.message != "ok") {
        return this.$message.error(res.data.data);
      }
      this.$message.success("删除成功");
      this.handleCloses();

      this.getAdminList();
    },
  },
};
</script>

<style>
</style>